:root {
	// announce supported themes to the browser
	color-scheme: light dark;

	// variables not affected by themes
	--static-color: #{$black};
	--static-invert-color: #{$white};
	--static-target-color: #{$lightBlue};
	--static-transparent: #{$transparentBg};
	--map-pin-color: #{$midBlue};
	--map-favourite-pin-color: #{$funcCaution};
	--map-cluster-large-color: #{$midBlue};
	--map-cluster-medium-color: #{$transBlue};
	--map-cluster-small-color: #{$midFadedBlue};

	// variables for light theme
	--border-color: #{$lightGrey};
	--border-trans-color: #{$fadedGrey};
	--box-shadow-color: #{$midGrey};
	--func-caution-color: #{$funcCaution};
	--func-disabled-color: #{$lightGrey};
	--func-negative-color: #{$funcNegative};
	--func-negative-alternate-color: #{$strongFuncNegative};
	--func-neutral-color: #{$funcNeutral};
	--func-positive-color: #{$funcPositive};
	--func-positive-alternate-color: #{$lightGreen};
	--highlight-color: #{$highlightFadedYellow};
	--icon-neutral-color: #{$midGrey};
	--link-color: #{$midBlue};
	--loader-layer-background-color: #{$transBlack};
	--mask-layer-background-color: #{$transWhite};
	--oversized-text-color: #{$black};
	--screen-background-color: #{$white};
	--screen-shaded-background-color: #{$lightGrey};
	--screen-trans-background-color: #{$suggestTransWhite};
	--screen-striped-background-color: #{$veryFadedGrey};
	--svg-fill-color: #{$black};
	--svg-invert-fill-color: #{$white};
	--text-color: #{$deepGrey};
	--text-greyed-color: #{$darkGrey};
	--theme-color: #{$black};
	--theme-text-color: #{$white};
	--title-background-color: #{$white};
	--title-color: #{$black};

	// collapsible
	--collapsible-title-color: #{$black};

	// form
	--form-button-background-color: #{$white};
	--form-button-disabled-background-color: #{$veryFadedGrey};
	--form-button-disabled-text-color: #{$midGrey};
	--form-button-icon-color: #{$black};
	--form-button-icon-hover-shadow: #{$midFadedBlack};
	--form-button-main-text-color: #{$black};
	--form-button-text-color: #{$black};
	--form-checkradio-disabled-line-color: #{$lightGrey};
	--form-checkradio-line-color: #{$darkGrey};
	--form-checkradio-line-focus-color: #{$black};
	--form-data-background-color: #{$white};
	--form-focus-line1-color: #{$midFadedGrey};
	--form-focus-line2-color: #{$fadedGrey};
	--form-focus-line3-color: #{$veryFadedGrey};
	--form-focus-outline-color: #{$midFadedGrey};
	--form-group-hover-color: #{$midFadedGreen};
	--form-icon-button-hover-color: #{$lightGreen};
	--form-input-background-color: #{$white};
	--form-input-disabled-text-color: #{$midGrey};
	--form-input-line-color: #{$black};
	--form-main-button-background-color: #{$lightGreen};
	--form-required-background-color: #{$white};
	--form-select-arrow-hover: url(../icons/chevron-select-active.svg);
	--form-select-arrow: url(../icons/chevron-select.svg);
	--form-select2-selectedline-color: #{$fadedGrey};
	--form-title-text-hover-color: #{$black};

	// login
	--login-atwork-background-color: #{$transWhite};
	--login-atwork-hover-background-color: #{$white};
	--login-atwork-shadow-color: #{$midGrey};
	--login-text-shadow-color: #{$white};

	// messages
	--message-danger-background-color: #{$veryFadedNegative};
	--message-default-background-color: #{$veryFadedGrey};
	--message-default-border-color: #{$lightGrey};
	--message-footer-color: #{$deepGrey};
	--message-info-background-color: #{$veryFadedBlue};
	--message-success-background-color: #{$veryFadedPositive};
	--message-warning-background-color: #{$veryFadedCaution};
	--tag-default-background-color: #{$fadedGrey};

	// menu
	--menu-active-background-color: #{$lightGrey};
	--menu-background-color: #{$white};
	--menu-border-color: #{$white};
	--menu-text-color: #{$black};

	// table
	--table-hover-line-color: #{$hoverGreen};
	--table-input-background: #{$midFadedWhite};
	--table-odd-line-color: #{$oddLineGrey};
	--table-odd-line-theme-color: #{$hoverBlue};
	--table-order-button-color: #{$deepGrey};
	--table-row-recap-color: #{$veryFadedGrey};
	--table-row-recap-main-color: #{$fadedGrey};
	--table-separator-line: #{$darkGrey};

	// tinyMCE
	--mce-bar-background: #{$veryLightGrey};

	body.caerp.theme_manage_people {
		--oversized-text-color: #{$darkBlue};
		--theme-color: #{$darkBlue};
		--theme-text-color: #{$white};
		--title-color: #{$darkBlue};

		// collapsible
		--collapsible-title-color: #{$darkBlue};

		// form
		--form-title-text-hover-color: #{$darkBlue};

		// menu
		--menu-active-background-color: #{$washedBlue};

		// table
		--table-row-recap-color: #{$veryFadedBlue};
		--table-row-recap-main-color: #{$fadedBlue};
	}

	body.caerp.theme_manage_entity {
		--oversized-text-color: #{$black};
		--theme-color: #{$veryLightBlue};
		--theme-text-color: #{$black};
		--title-color: #{$black};

		// collapsible
		--collapsible-title-color: #{$black};

		// form
		--form-title-text-hover-color: #{$lightGreen};

		// menu
		--menu-active-background-color: #{$washedVeryLightBlue};

		// table
		--table-row-recap-color: #{$veryFadedVeryLightBlue};
		--table-row-recap-main-color: #{$fadedVeryLightBlue};
	}
}

// variables for automatic theme
@media (prefers-color-scheme: dark) {
	:root {
		--border-color: #{$midGrey};
		--border-trans-color: #{$fadedGrey};
		--box-shadow-color: #{$black};
		--func-caution-color: #{$darkModeFuncNegative};
		--func-disabled-color: #{$lightGrey};
		--func-negative-color: #{$funcCaution};
		--func-negative-alternate-color: #{$strongFuncNegative};
		--func-neutral-color: #{$darkModeLightBlue};
		--func-positive-color: #{$funcPositive};
		--func-positive-alternate-color: #{$lightGreen};
		--highlight-color: #{$highlightYellow};
		--icon-neutral-color: #{$darkGrey};
		--link-color: #{$lightGreen};
		--loader-layer-background-color: #{$transWhite};
		--mask-layer-background-color: #{$transBlack};
		--oversized-text-color: #{$veryLightBlue};
		--screen-background-color: #{$darkModeGrey};
		--screen-shaded-background-color: #{$black};
		--screen-trans-background-color: #{$suggestDarkModeGrey};
		--svg-fill-color: #{$white};
		--svg-invert-fill-color: #{$black};
		--text-color: #{$white};
		--text-greyed-color: #{$midTransWhite};
		--title-background-color: #{$fadedBlack};
		--title-color: #{$white};

		// collapsible
		--collapsible-title-color: #{$veryLightBlue};

		// form
		--form-button-background-color: #{$black};
		--form-button-disabled-background-color: #{$veryFadedGrey};
		--form-button-disabled-text-color: #{$midGrey};
		--form-button-icon-color: #{$white};
		--form-button-icon-hover-shadow: #{$white};
		--form-button-main-text-color: #{$black};
		--form-button-text-color: #{$white};
		--form-checkradio-disabled-line-color: #{$lightGrey};
		--form-checkradio-line-color: #{$transWhite};
		--form-checkradio-line-focus-color: #{$white};
		--form-data-background-color: #{$fadedBlack};
		--form-focus-line1-color: #{$transWhite};
		--form-focus-line2-color: #{$midFadedWhite};
		--form-focus-line3-color: #{$fadedWhite};
		--form-focus-outline-color: #{$midFadedWhite};
		--form-group-hover-color: #{$midFadedGreen};
		--form-icon-button-hover-color: #{$lightGreen};
		--form-input-background-color: #{$black};
		--form-input-disabled-text-color: #{$midGrey};
		--form-input-line-color: #{$white};
		--form-main-button-background-color: #{$lightGreen};
		--form-required-background-color: #{$black};
		--form-select-arrow-hover: url(../icons/chevron-select-active.svg);
		--form-select-arrow: url(../icons/chevron-select-white.svg);
		--form-select2-selectedline-color: #{$midFadedGrey};
		--form-title-text-hover-color: #{$lightGreen};

		// login
		--login-atwork-background-color: #{$transBlack};
		--login-atwork-hover-background-color: #{$black};
		--login-atwork-shadow-color: #{$black};
		--login-text-shadow-color: #{$black};

		// messages
		--message-danger-background-color: #{$fadedBlack};
		--message-default-background-color: #{$fadedBlack};
		--message-default-border-color: #{$lightGrey};
		--message-footer-color: #{$midTransWhite};
		--message-info-background-color: #{$fadedBlack};
		--message-success-background-color: #{$fadedBlack};
		--message-warning-background-color: #{$fadedBlack};

		// menu
		--menu-active-background-color: #{$midGrey};
		--menu-background-color: #{$black};
		--menu-border-color: #{$black};
		--menu-text-color: #{$white};

		// table
		--table-hover-line-color: #{$darkModeHoverGreen};
		--table-input-background: #{$midFadedBlack};
		--table-odd-line-color: #{$oddLineWhite};
		--table-odd-line-theme-color: #{$hoverBlue};
		--table-order-button-color: #{$lightGrey};
		--table-row-recap-color: #{$fadedVeryLightBlue};
		--table-row-recap-main-color: #{$fadedGrey};
		--table-separator-line: #{$midFadedWhite};

		// tinyMCE
		--mce-bar-background: #{$deepGrey};

		body.caerp.theme_manage_people {
			--oversized-text-color: #{$veryLightBlue};
			--title-color: #{$white};

			// collapsible
			--collapsible-title-color: #{$lightGreen};

			// form
			--form-title-text-hover-color: #{$lightGreen};

			// menu
			--menu-active-background-color: #{$midBlue};

			// table
			--table-row-recap-color: #{$fadedVeryLightBlue};
			--table-row-recap-main-color: #{$midFadedVeryLightBlue};
		}

		body.caerp.theme_manage_entity {
			--oversized-text-color: #{$veryLightBlue};
			--title-color: #{$veryLightBlue};

			// collapsible
			--collapsible-title-color: #{$lightGreen};

			// form
			--form-title-text-hover-color: #{$lightGreen};

			// menu
			--menu-active-background-color: #{$darkModeLightBlue};

			// table
			--table-row-recap-color: #{$veryFadedVeryLightBlue};
			--table-row-recap-main-color: #{$fadedVeryLightBlue};
		}
	}
}
